<template>
  <div class="container">
    <div class="top" :style="dataBg">
      <div class="item" @click="showTable(4)">
        <div class="iten_son" :style="personnel">
          <div class="personnelcolor">{{ data.congyeNum }}</div>
        </div>
        <div class="personnelcolor">从业人员</div>
      </div>
      <div class="item" @click="showTable(5)">
        <div class="iten_son" :style="personnel">
          <div class="personnelcolor">{{ data.guanliNum }}</div>
        </div>
        <div class="personnelcolor">企业管理员</div>
      </div>
      <div class="item" @click="showTable(6)">
        <div class="iten_son" :style="personnel">
          <div class="personnelcolor">{{ data.safeNum }}</div>
        </div>
        <div class="personnelcolor">食品安全管理员</div>
      </div>
    </div>
    <rz-height></rz-height>
    <div class="Format">
      <!-- <div class="item">
        <div class="iten_son_header">
          <div class="left">
            <img src="@/assets/images/cicleBg.png" alt="" />
            <div>食品生产</div>
          </div>
          <div class="right">
            <div><span>2323234</span>家</div>
            <div><span>34343443</span>人</div>
          </div>
        </div>
        <div>1213</div>
      </div>
      <div class="item">
        <div class="iten_son_header">
          <div class="left">
            <img src="@/assets/images/cicleBg.png" alt="" />
            <div>食品生产</div>
          </div>
          <div class="right">
            <div><span>2323234</span>家</div>
            <div><span>34343443</span>人</div>
          </div>
        </div>
        <div class="iten_son_body">
          <div class="left_item">
            <div class="title">冷藏冷冻</div>
            <div>12143|121343</div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="iten_son_header">
          <div class="left">
            <img src="@/assets/images/cicleBg.png" alt="" />
            <div>食品生产</div>
          </div>
          <div class="right">
            <div><span>2323234</span>家</div>
            <div><span>34343443</span>人</div>
          </div>
        </div>
        <div>1213</div>
      </div>
      <div class="item">
        <div class="iten_son_header">
          <div class="left">
            <img src="@/assets/images/cicleBg.png" alt="" />
            <div>食品生产</div>
          </div>
          <div class="right">
            <div><span>2323234</span>家</div>
            <div><span>34343443</span>人</div>
          </div>
        </div>
        <div>1213</div>
      </div> -->
      <div class="left" style="padding-top: 10px">
        <div
          class="item"
          v-for="(item, index) in data.bodyIndustrylist"
          :key="index"
          @click="showTable(index)"
        >
          <div class="iten_son" :style="note">
            <div class="Formatcolor">{{ item.count }}/{{ item.bodycount }}</div>
          </div>
          <div style="padding: 0 10px" class="Formatcolor">
            {{ item.bodyindustry.replace(/经营者/, '') }}
          </div>
        </div>
      </div>
      <div class="left">
        <div class="item" @click="showTable(7)">
          <div class="iten_son" :style="note">
            <div class="Formatcolor">
              {{ data.specialfood }}/{{ data.specialfoodbodyNum }}
            </div>
          </div>
          <div class="Formatcolor">特殊食品</div>
        </div>
        <div class="item" @click="showTable(8)">
          <div class="iten_son" :style="note">
            <div class="Formatcolor">
              {{ data.sYNCP }}/{{ data.sYNCPbodyNum }}
            </div>
          </div>
          <div class="Formatcolor">从事食用农产品</div>
        </div>

        <div class="item" @click="showTable(9)">
          <div class="iten_son" :style="note">
            <div class="Formatcolor">{{ data.lDP }}/{{ data.lDPbodyNum }}</div>
          </div>
          <div class="Formatcolor">从事冷藏冷冻农产品</div>
        </div>
        <!-- <div class="item">
          <div class="iten_son">
            <div class="Formatcolor"></div>
          </div>
          <div class="Formatcolor"></div>
        </div> -->
      </div>
    </div>
    <rz-height></rz-height>
    <div id="main" style="width: 100%; height: 240px"></div>
    <!-- <query-dialog
      v-if="dialogVisible"
      :dialogVisible="dialogVisible"
      width="80%"
      title="查看"
      @onconfirm="onconfirm"
      @oncancel="onconfirm"
      :type="type"
      :districtcode="districtcode"
    >
    </query-dialog> -->
  </div>
</template>
<script>
var echarts = require('echarts');
export default {
  props: {
    code: {
      type: String,
      default: '',
    },
  },
  // props:[],
  // 页面加载
  created() {
    console.log();
    // districtcode
    if (this.code) {
      this.districtcode = this.code;
    }
  },
  // 页面加载完成
  mounted() {
    this.query();
  },
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      data: {},
      note: {
        backgroundImage: 'url(' + require('@/assets/images/cicleBg.png') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%',
      },
      personnel: {
        backgroundImage:
          'url(' + require('@/assets/images/personnel.png') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%',
      },
      dataBg: {
        //
        // backgroundImage: "url(" + require("@/assets/images/dataBg.png") + ")",
        backgroundColor: 'rgba(32,72,136,.3)',
        // opacity: 0.9
        //  backgroundRepeat: "no-repeat",
        // backgroundSize: "100% 100%",
      },
      myChartleft: '',
      dialogVisible: false,
      type: 0,
      districtcode: '',
    };
  },
  // 方法
  methods: {
    setcard() {
      this.myChartleft = echarts.init(document.getElementById('main'));
      var option = {
        title: {
          top: 12,
          text: '各年龄段分布',
          //  subtext: '各区注册单位数',
          left: 'center',
          textStyle: {
            fontSize: 16,
            color: '#ffffff',
          },
        },
        backgroundColor: 'rgba(32,72,136,.3)',
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          top: '18%',
          data: ['男', '女'],
          textStyle: {
            color: 'white',
          },
        },
        calculable: true,
        xAxis: [
          {
            name: '年龄',
            axisLine: {
              lineStyle: {
                color: 'white', //坐标轴的颜色
              },
            },
            type: 'category',
            data: ['16-35', '36-45', '46-60', '60+'],

            // splitLine: {
            //   show: false,
            // },
          },
        ],
        grid: {
          left: '20%',
          bottom: '8%',
          top: '35%',
        },
        yAxis: [
          {
            type: 'value',
            name: '人数',
            // interval: 10000,
            axisLabel: {
              // textStyle: {
              //   color: "white", //坐标的字体颜色
              // },
              formatter: '{value} ',
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'white', //坐标轴的颜色
              },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: '男',
            type: 'bar',
            data: [
              this.data.man1635,
              this.data.man3545,
              this.data.man4560,
              this.data.manOver60,
            ],
            barWidth: 15,
            color: ['#437EB8'],
            label: {
              show: true,
              position: 'top',
              color: '#fff',
            },
          },
          {
            name: '女',
            type: 'bar',

            data: [
              this.data.woman1635,
              this.data.woman3545,
              this.data.woman4560,
              this.data.womanOver60,
            ],
            barWidth: 15,
            color: ['#EA4A97'],
            label: {
              show: true,
              position: 'top',
              color: '#fff',
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      this.myChartleft.setOption(option);
    },
    getdata() {
      console.log(131);
    },
    query() {
      this.$http
        .queryInfo({ code: this.code })
        .then(res => {
          if (res.code == 200) {
            this.data = res.data;
            this.setcard();
          } else {
            this.$error(res.msg);
          }
        })
        .catch(err => {
          this.$error();
          console.log(err);
        });
    },
    onconfirm() {
      this.dialogVisible = false;
    },
    showTable(e) {
      if (e <= 0 || e < this.data.bodyIndustrylist.length) {
        // e=this.data.bodyIndustrylist.filter(x=>x)
        let data = {
          食品流通经营者: 1,
          食品生产经营者: 0,
          餐饮服务经营者: 2,
          单位食堂: 3,
        };
        e =
          data[
            this.data.bodyIndustrylist.filter((x, index) => index == e)[0]
              .bodyindustry
          ];
      }
      this.$router.push({
        name: 'query',
        query: { code: this.code, type: e + '' },
      });
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: {
    // "query-dialog": () => import("@/views/monitoring/components/query"),
  },
  // 计算属性
  computed: {
    opened: () => store.state.app.sidebar.opened,
  },
};
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  .top {
    padding-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 130px;
      // width: 100px;
      flex: 1;
      // max-width: 130px;
      cursor: pointer;
      .iten_son {
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        // height: 100%;
        min-width: 75px;
        // flex: 1;
        // width: 100%;
        min-height: 75px;
        color: #4adefe;
        font-size: 12px;
        border-radius: 50%;
        // border: 5px  solid #62BCE1;
      }
    }
  }

  //  .top {
  //   padding: 10px 0;
  //   display: flex;
  //   flex-wrap: wrap;
  //   justify-content: space-evenly;
  //   .item {
  //     height: 100px;
  //     flex: 1;
  //     // width: 100px;
  //     padding: 10px;
  //     .iten_son {
  //       display: flex;
  //       align-items: center;
  //       text-align: center;
  //       flex-direction: column;
  //       justify-content: center;
  //       height: 100%;
  //       color: #4adefe;
  //       font-size: 12px;
  //       border-radius: 50%;
  //       // border: 5px  solid #62BCE1;
  //     }
  //   }
  // }
  .left {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 130px;
      //  width: 100px;
      // max-width: 130px;
      flex: 1;
      cursor: pointer;
      .iten_son {
        display: flex;
        align-items: center;
        justify-content: center;
        // flex: 1;
        min-height: 75px;
        min-width: 75px;
        color: #4adefe;
        font-size: 12px;
        border-radius: 50%;
        // border: 5px  solid #62BCE1;
      }
    }
  }

  .personnelcolor {
    color: #8fff71;
    font-size: 14px;
    text-align: center;
    height: 30px;
    line-height: 30px;
  }
  .Formatcolor {
    color: #6ee8df;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    text-align: center;
  }
  .Format {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px;
    background-color: rgba(32, 72, 136, 0.3);
    // 下面的代码注释了
    // .item {
    //   width: 48%;
    //   border-radius: 5px;
    //   // flex:1;
    //   padding: 10px;
    //   border: 1px solid #0660ba;
    //   color:#01C8E7;
    //   .iten_son_header {
    //     display: flex;
    //     padding-bottom: 10px;
    //     border-bottom: 1px solid #08c7f1;
    //     .left {
    //       width: 70px;
    //       height: 70px;
    //       border-radius: 50%;
    //       border: 2px solid #0571be;
    //       img {
    //         width: 30px;
    //         height: 30px;
    //       }
    //       > div {
    //         font-size: 12px;
    //         text-align: center;
    //         color: #00e2fb;
    //       }
    //     }
    //     .right {
    //       // display: flex;
    //       // justify-content: center;
    //       // align-items: center;
    //       flex: 1;
    //       display: flex;

    //       flex-direction: column;
    //       justify-content: space-evenly;

    //       > div {
    //         text-align: center;
    //       }
    //     }
    //   }
    //   .iten_son_body {
    //     display: flex;
    //     margin-top: 10px;

    //     .left_item {
    //       flex: 1;
    //       display: flex;
    //       justify-content: space-between;
    //       .title{
    //         font-size: 14px;
    //       }
    //     }
    //   }
    // }
    // .item:nth-child(1) {
    //   margin-bottom: 10px;
    // }
    // .item:nth-child(2) {
    //   margin-bottom: 10px;
    // }
  }
}
</style>
